<template>
	<SelectFriend ref="selectFriendRef" v-if="isShowSelectFriend" />
	<div v-else-if="isShowContactList" :class="['TUI-contact', !isPC && 'TUI-contact-h5']">
		<div :class="['TUI-contact-left', !isPC && 'TUI-contact-h5-left']" v-if="isShowContactListInH5">
			<!-- <ContactSearch v-if="is_master==1" /> -->
			<ContactList :class="['TUI-contact-left-list', !isPC && 'TUI-contact-h5-left-list']" />
		</div>
		<div :class="['TUI-contact-right', !isPC && 'TUI-contact-h5-right']" v-if="isShowContactInfoInH5">
			<ContactInfo @switchConversation="switchConversation" />
		</div>
	</div>
</template>

<script lang="ts">
	export default {
		data() {
			return {

			}
		},
		onBackPress(options : any) {
			if (options.from === "backbutton") {
				this.$store.commit("setIsBack", true);
				this.$refs.selectFriendRef.handleSelectedResult([])
				return true;
			} else {
				return false;
			}

		},
	}
</script>
<script lang="ts" setup>
	import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
	import { ref, watchEffect } from "../../adapter-vue";
	import { isPC, isUniFrameWork } from "../../utils/env";
	import { TUIGlobal } from "../../utils/universal-api/index";

	import SelectFriend from "./select-friend/index.vue";
	import ContactSearch from "./contact-search/index.vue";
	import ContactList from "./contact-list/index.vue";
	import ContactInfo from "./contact-info/index.vue";

	const emits = defineEmits(["switchConversation"]);

	const props = defineProps({
		// web/h5 单页面应用展示形式，uniapp 请忽略
		displayType: {
			type: String,
			default: "contactList", // "contactList" 关系链列表(默认) / "selectFriend" 好友选择列表
			require: false,
		},
	});

	const displayTypeRef = ref<string>(props.displayType || "contactList");
	const isShowSelectFriend = ref(false);
	const isShowContactList = ref(true);
	const isShowContactListInH5 = ref(true);
	const isShowContactInfoInH5 = ref(true);

	let is_master = ref(0)
	if (uni.getStorageSync('userInfoFull')) {
		is_master = uni.getStorageSync('userInfoFull').user.is_master
	}


	watchEffect(() => {
		isShowContactList.value = props?.displayType !== "selectFriend";
	});

	TUIStore.watch(StoreName.CUSTOM, {
		isShowSelectFriendComponent: (data : any) => {
			if (!isUniFrameWork && props?.displayType === "selectFriend") {
				// 原生 web & h5 单页面应用，displayType 为 selectFriend 时，才唤起 selectFriend
				isShowSelectFriend.value = data;
				isShowContactList.value = false;
				return;
			}
			if (data) {
				isShowSelectFriend.value = true;
				if (isUniFrameWork) {
					displayTypeRef.value = "selectFriend";
					//TUIGlobal?.hideTabBar();
				}
			} else {
				isShowSelectFriend.value = false;
				if (isUniFrameWork) {
					displayTypeRef.value = props.displayType;
					//TUIGlobal?.showTabBar();
				}
			}
		},
		currentContactInfo: (data : any) => {
			if (isPC) {
				isShowContactListInH5.value = true;
				isShowContactInfoInH5.value = true;
			} else if (!data || typeof data !== "object" || Object.keys(data)?.length <= 0) {
				// 判断 移动端 展示 contactList 还是 contactInfo
				// contactInfo 不存在，展示contactList
				isShowContactListInH5.value = true;
				isShowContactInfoInH5.value = false;
			} else {
				// 判断 移动端 展示 contactList 还是 contactInfo
				// contactInfo 存在，展示contactInfo
				isShowContactListInH5.value = false;
				isShowContactInfoInH5.value = true;
			}
		},
	});

	const switchConversation = (data : any) => {
		isUniFrameWork &&
			TUIGlobal?.navigateTo({
				url: "/TUIKit/components/TUIChat/index",
			});
		emits("switchConversation", data);
	};
</script>
<style lang="scss" scoped>
	@import url("../../assets/styles/common.scss");

	.TUI-contact {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		overflow: hidden;

		&-left {
			min-width: 285px;
			flex: 0 0 24%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		&-right {
			border-left: 1px solid #f4f5f9;
			flex: 1;
			overflow: hidden;
		}
	}

	.TUI-contact-h5 {

		&-left,
		&-right {
			width: 100%;
			height: 100%;
			flex: 1;
		}

		&-left {
			&-list {
				overflow-y: auto;
			}
		}
	}
</style>